import React from 'react'
import {Form, Input, Card, InputNumber, Button} from 'antd'

const FormItem = Form.Item

export default class RawForm extends React.Component {
  // state = { number: { value: 13} }
  constructor(props) {
    super(props)
    this.state = {number: {value: 13}}
  }

  handleNumberChange = value => {
    this.setState({
      number: {
        ...this.validatePrimeNumber(value),
        value
      }
    })
  }

  validatePrimeNumber(value) {
    if (value === 11) {
      return {
        validateStatus: 'success',
        errorMsg: null
      }
    } else {
      return {
        validateStatus: 'error',
        errorMsg: '请填写11'
      }
    }
  }

  render() {
    const formItemLayout = {
      labelCol: {span: 2},
      wrapperCol: {span: 12}
    }
    const {number} = this.state
    return (
      <Form>
        <FormItem
          {...formItemLayout}
          label='8到12之间'
          hasFeedback
          validateStatus={number.validateStatus}
          help={
            number.errorMsg ||
            '素数是一个大于1的自然数，除1和它本身之外没有正除数'
          }
        >
          <InputNumber
            min={8}
            max={12}
            value={number.value}
            onChange={this.handleNumberChange}
          />
        </FormItem>
      </Form>
    )
  }
}
